<template>
    <div class="login">
        <div class="img">
            <h3>坑你一点购物</h3>
            <div class="username">
                <span class="key">账号：</span>
                <el-input
                        class="input"
                        v-model="username"
                        maxlength="10"
                        placeholder="请输入账号" />
            </div>
            <div class="username">
                <span class="key">密码：</span>
                <el-input
                        class="input"
                        type="password"
                        v-model="password"
                        placeholder="请输入密码" />
            </div>
            <div class="infoEdit">
                <span class="text1">忘记密码</span>
                <span class="text2">注册账号</span>
            </div>
            <div class="loginBut">
                <el-button class="el-but" type="primary" @click="toRouter" >登录</el-button>
            </div>
        </div>

    </div>
</template>

<script>
    import {login} from '../../api/login'
    import Cookies from 'js-cookie'//npm i js-cookie 先安装
    export default {
        name: "login-view",
        data(){
            return{
                username:"zhangsan",
                password:"12345678"
            }
        },
        methods:{
            toRouter(){
                login({ username: this.username, password: this.password }).then(response => {
                    const { data } = response
                    if(data.code  == '200'){
                        //console.log("token:"+data.data.token)
                        //localStorage.setItem('token', JSON.stringify(data.data.token))
                        Cookies.set('Authorization', data.data.token)
                        this.$router.push({name:'menu',params:{username:data.data.username}})
                    }else{
                        alert("账号或者密码错误，请从新登录");
                    }
                }).catch(error => {
                    alert("登录失败！"+error);
                })
            }
        }
    }
</script>

<style scoped>
    .login{
        width: 100%;
        height: 100%;
        background: url("../../assets/static/bg/book1.png") no-repeat;
        background-size: 100% 100%;
    }
    h3{
        padding-top: 20px;
    }
    .img{
        width: 300px;
        height: 300px;
        background-color: #E9EEF3;
        position: relative;
        left: -150px;
        margin-left: 50%;
        margin-bottom: 50%;
        bottom: -150px;
        border-radius: 10%;
    }
    .username{
        padding: 20px 5px;
    }
    .key{
        width: 50px;
        padding-left: 10px;
    }
    .input{
        width: 230px;
        padding-right: 10px;
    }
    .infoEdit{
        padding: 10px;
    }
    .text1{
        float: left;
        padding-left: 40px;
    }
    .text2{
        float: right;
        padding-right: 10px;
    }
    .loginBut{
        padding: 30px;
        font-size: 1.5em;
    }
    .el-but{
        width: 90px;
        height: 40px;
    }
</style>
